/* eslint-disable react/jsx-no-target-blank */
/* eslint-disable jsx-a11y/anchor-is-valid */
import React, {Component} from 'react';
import { Button, Input, Checkbox, InputGroup, InputLeftElement, Box, Flex, Spacer, Text, Center, Grid, GridItem, Image } from '@chakra-ui/react';
import { PhoneIcon, LockIcon, EditIcon } from '@chakra-ui/icons';
import './index.css';
import wechat from './images/wechat.png';
import qq from './images/qq.png';
import weibo from './images/weibo.png';
import { inject, observer } from 'mobx-react';

@inject('login')
@observer
class App extends Component {
  render () {
    const { login } = this.props;
    if (login.isLogin) {
      return (
        <Box w="100vw" h="100vh" bg="#f1f1f1">
          <Box p="50px" w="400px" h="500px" borderRadius="4px" boxShadow="base" bg="white">
            <Flex>
              <Spacer />
              <Box pb="50px">
                <a className="title active" onClick={login.login}>登录</a>
                <b className="title">·</b>
                <a className="title" onClick={login.register}>注册</a>
              </Box>
              <Spacer />
            </Flex>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<PhoneIcon color="gray.300" />}
              />
              <Input value={login.phone} onChange={login.changePhone} type="email" placeholder="手机号或邮箱" />
            </InputGroup>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<LockIcon color="gray.300" />}
              />
              <Input value={login.password} onChange={login.changePwd} type="password" placeholder="密码" />
            </InputGroup>
            <Checkbox className="remember-btn" defaultIsChecked>记住我</Checkbox>
            <div className="forget-btn">
              <a className="forget-btn-title" href="">登录遇到问题?</a>
            </div>
            <Button
              height="43px"
              width="300px"
              borderRadius="25px"
              bg="#3194d0"
              color="#ffffff"
              onClick={login.submitLogin}
            >
              登录
            </Button>
            <Center>
              <Text mt="50px">社交帐号登录</Text>
            </Center>
            <Grid
              mt="20px"
              h="50px"
              templateRows="repeat(2, 1fr)"
              templateColumns="repeat(5, 1fr)"
              gap={5}
            >
              <GridItem colSpan={1} ></GridItem>
              <GridItem colSpan={1} >
                <Image m="auto" h="30px" src={weibo}></Image>
              </GridItem>
              <GridItem colSpan={1} >
                <Image m="auto" h="30px" src={wechat}></Image>
              </GridItem>
              <GridItem colSpan={1} >
                <Image m="auto" h="30px" src={qq}></Image>
              </GridItem>
              <GridItem colSpan={1} ></GridItem>
            </Grid>
          </Box>
        </Box>
      );
    } else {
      return (
        <Box w="100vw" h="100vh" bg="#f1f1f1">
          <Box p="50px" w="400px" h="500px" borderRadius="4px" boxShadow="base" bg="white">
            <Flex>
              <Spacer />
              <Box pb="50px">
                <a className="title" onClick={login.login}>登录</a>
                <b className="title">·</b>
                <a className="title active" onClick={login.register}>注册</a>
              </Box>
              <Spacer />
            </Flex>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<EditIcon color="gray.300" />}
              />
              <Input value={login.nickName} onChange={login.changeNickName}type="text" placeholder="你的昵称" />
            </InputGroup>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<PhoneIcon color="gray.300" />}
              />
              <Input value={login.phone} onChange={login.changePhone} type="tel" placeholder="手机号" />
            </InputGroup>
            <InputGroup>
              <InputLeftElement
                pointerEvents="none"
                children={<LockIcon color="gray.300" />}
              />
              <Input value={login.password} onChange={login.changePwd} type="password" placeholder="设置密码" />
            </InputGroup>
            <Button
              mt="20px"
              height="43px"
              width="300px"
              borderRadius="25px"
              bg="#3db922"
              color="#ffffff"
              onClick={login.submitRegister}
            >
              注册
            </Button>
            <div dangerouslySetInnerHTML={{ __html: `<p class="sign-up-msg">
              点击 “注册” 即表示您同意并愿意遵守简书
              <br>
              <a class="sign-up-msg-a" target="_blank" href="https://www.jianshu.com/p/c44d171298ce">用户协议</a>
              和
              <a class="sign-up-msg-a" target="_blank" href="https://www.jianshu.com/p/2ov8x3">隐私政策</a>
            </p>` }}></div>
            <Center>
              <Text fontSize="12px" color="#b5b5b5">社交帐号直接登录</Text>
            </Center>
            <Grid
              mt="20px"
              h="50px"
              templateRows="repeat(2, 1fr)"
              templateColumns="repeat(4, 1fr)"
              gap={4}
            >
              <GridItem colSpan={1} ></GridItem>
              <GridItem colSpan={1} >
                <Image m="auto" h="30px" src={wechat}></Image>
              </GridItem>
              <GridItem colSpan={1} >
                <Image m="auto" h="30px" src={qq}></Image>
              </GridItem>
              <GridItem colSpan={1} ></GridItem>
            </Grid>
          </Box>
        </Box>
      );
    }
  }
}

export default App;
